<template>
    <div>
        <h1>vue3语法</h1>
        <h1>{{msg}}</h1>
        <h2>{{num}}</h2>
        <input type="text" v-model="num" />
        <button @click="add">加一</button>
        <h2>{{obj.name}}</h2>
        <input type="text" v-model="obj.name">
        <button @click="showObj">展示对象</button>
        <h2>{{ arr }}</h2>
        <ul>
            <li v-for="(item, index) in arr" :key="index">
                <div>{{ item }}</div>
            </li>
        </ul>
        <ul>
            <!--
                value key index
                只是一个变量名字
                到底这几个变量代表什么值，取决于v-for执行时传入的值是什么
                value tom 10
                key  name  age
                index 下标

                value  name age
                key   tom 10

                平时定义
                obj = {name:'tom' age:18}
                value  tom  18
                key   name  age
            -->>
            <li v-for="(value,key,index) of obj" :key="index">
                <div>{{value}}---{{key}}---{{index}}</div>
            </li>
        </ul>
        <hr>
        <h1>data当中的值</h1>
        <h2>{{info}}</h2>
    </div>
</template>

<script lang="ts">
import { defineComponent,reactive,ref} from 'vue'
export default defineComponent({
    setup () {
    //这种写法数据不是响应式
        // let msg='天气确实很好';
        // let num=1;
        // function add(){
        //     console.log(num)
        // }
    //在数据上包一个ref,先在import当中引入ref,对基本数据类型的处理包上ref,(处理引用数据类型不是这种方法)
        let msg=ref('天气确实很好');
        let num=ref(1);
        function add(){
            //当基本数据类型包上ref之后，变为一个响应式的数据，数据就变为一个ref对象，通过get和set变为响应式数据
            console.log(num);
            console.log(num.value);
            //在ref对象当中，ts或者说是js当中操作数据获取具体的值 xx.value,在模板（template）当中获取不需要xx.vue,直接使用即可
            num.value += 1;
            //this.num +=1;
            //console.log(this);
            //此处不能使用this,使用报错   之后讲解 生命周期
        }

        // 引用数据类型
        // let obj=ref({
        //     name:'jack',
        //     age:11,
        // })
        // 使用ref或者reactive都需要在import当中引入
        let obj=reactive({
            name:'jack',
            age:11,
        })
        // setup当中定义的数据不是响应式数据
        /*  let obj = {
        name: "tom",
        age: 10,
        }; */
        // ref或者reactive
        /* let obj = ref({
        name: "tom",
        age: 10,
        }); */
        let arr = reactive([1, 2, 5]);
        // 使用ref包裹对象之后，该对象变为ref对象，是响应式数据，但是value值不是该对象是proxy代理对象
        //使用 reactive将对象变为响应式对象，直接它就是proxy
        function showObj(){
            console.log(obj)
        }
        return {
            msg,
            num,
            add,
            obj,
            showObj,
            arr,
        }
        /*
        setup
        1.当中的this不是组件对象 不能使用this.data中的属性 不能访问计算属性 监听器 methods
        2.所有在模板template中使用的数据 都需要在setup函数的return返回值的对象中返回
        */
    },
    data(){
        // 在data当中写个值 在setup中写个值 这两个值的名字一样  内容不一样 你说听谁的
        // 有的脚手架会报错 重复命名了 有的电脑的环境不行 使用setup中的值
        return{
            info:'看看setup和data当中的值是否一样'
        }
    }
})
</script>

<style scoped>

</style>